<!--
 * @Author: your name
 * @Date: 2020-09-25 11:13:04
 * @LastEditTime: 2020-09-25 15:27:34
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \antd-vue-pro\src\views\pageTest\table.vue
-->
<template>
<div>
    <a-card>
        <a-table :columns="columns" :data-source="dataSource" bordered>
            <template slot="num" slot-scope="text, record">
                <div class="num" style="width: 190px">
                    <a-input v-if="record.editable" style="margin: -5px 0" :value="text" @change="(e) => handleChange(e.target.value, record.id, 'num')" />
                    <template v-else>
                        {{ text }}
                    </template>
                </div>
            </template>
            <template slot="operation" slot-scope="text, record">
                <div class="editable-row-operations">
                    <span v-if="record.editable">
                        <a @click="() => save(record.id)">Save</a>
                        <a-popconfirm title="Sure to cancel?" @confirm="() => cancel(record.id)">
                            <a>Cancel</a>
                        </a-popconfirm>
                    </span>
                    <span v-else>
                        <a :disabled="editingKey !== ''" @click="() => edit(record.id)">Edit</a>
                    </span>
                </div>
            </template>
        </a-table>
    </a-card>

    <a-card>
        <a-form :form="form">
            <a-form-item>
                <a-button v-if="!editingKey2" type="primary" @click="edit2"> edit </a-button>
                <span v-else>
                    <a-button class="marR10" type="primary" @click="save2"> save </a-button>
                    <a-popconfirm title="Sure to cancel?" @confirm="() => cancel2()">
                        <a-button type="default"> cancle </a-button>
                    </a-popconfirm>
                </span>
            </a-form-item>
        </a-form>

        <a-table :columns="columns2" :data-source="dataSource2" bordered>
            <template slot="num" slot-scope="text, record">
                <div class="num" style="width: 190px">
                    <a-input v-if="editingKey2" style="margin: -5px 0" :value="text" @change="(e) => handleChange2(e.target.value, record.id, 'num')" />
                    <template v-else>
                        {{ text }}
                    </template>
                </div>
            </template>
        </a-table>
    </a-card>
</div>
</template>

<script>
import {
    tablelist
} from '@/api/table'

const temp = {} // 当前重复的值,支持多列
const mergeCellKey = (text, array, columns) => {
    let i = 0
    if (text !== temp[columns]) {
        temp[columns] = text
        array.forEach((item) => {
            if (item[columns] === temp[columns]) {
                i += 1
            }
        })
    }
    return i
}
const renderContent = (value, row, index) => {
    const obj = {
        children: value,
        attrs: {},
    }
    return obj
}

export default {
    data() {
        const cols = [{
                title: '车间',
                dataIndex: 'depart',
                customRender: (value, row, index) => {
                    const obj = {
                        children: value,
                        attrs: {},
                    }
                    obj.attrs.rowSpan = mergeCellKey(row.depart, this.dataSource, 'depart')
                    return obj
                },
            },
            {
                title: '工艺段',
                dataIndex: 'craft',
                customRender: (value, row, index) => {
                    const obj = {
                        children: value,
                        attrs: {},
                    }
                    obj.attrs.rowSpan = mergeCellKey(row.craft, this.dataSource, 'craft')
                    return obj
                },
            },
            {
                title: '能源',
                dataIndex: 'energy',
                scopedSlots: {
                    customRender: 'energy',
                },
            },
            // {
            //     title: '处理方式',
            //     dataIndex: 'sss',
            //     customRender: renderContent,
            // },
            {
                title: '单位',
                dataIndex: 'unit',
                scopedSlots: {
                    customRender: 'unit',
                },
            },
            {
                title: '指标',
                dataIndex: 'num',
                // customRender: renderContent,
                scopedSlots: {
                    customRender: 'num',
                },
            },
            {
                title: '操作',
                dataIndex: 'operation',
                scopedSlots: {
                    customRender: 'operation',
                },
            },
        ]
        return {
            columns: cols,
            dataSource: [],
            editingKey: '',
            cacheData: [],

            /*---------------------table2---------------------*/
            columns2: cols.filter((item) => item.dataIndex != 'operation'),
            dataSource2: [],
            editingKey2: '',
            cacheData2: [],
            form: this.$form.createForm(this, {
                name: 'coordinated',
            }),
        }
    },
    mounted() {
        this.getDataList()
    },

    methods: {
        async getDataList() {
            const Res = await tablelist()
            if (Res) {
                this.dataSource = Res.result
                this.dataSource2 = JSON.parse(JSON.stringify(Res.result))
            }
        },
        handleChange(value, id, column) {
            const newData = [...this.dataSource]
            const target = newData.filter((item) => id === item.id)[0]
            if (target) {
                target[column] = value
                this.dataSource = newData
            }
        },
        edit(id) {
            const newData = [...this.dataSource]
            const target = newData.filter((item) => id === item.id)[0]
            this.editingKey = id
            console.log('target:', target, 'id:', id)
            if (target) {
                target.editable = true
                this.dataSource = newData
            }
        },
        save(id) {
            const newData = [...this.dataSource]
            const newCacheData = [...this.cacheData]
            const target = newData.filter((item) => id === item.id)[0]
            const targetCache = newCacheData.filter((item) => id === item.id)[0]
            if (target && targetCache) {
                delete target.editable
                this.dataSource = newData
                Object.assign(targetCache, target)
                this.cacheData = newCacheData
            }
            this.editingKey = ''
        },
        cancel(id) {
            console.log('cancel:', id)
            const newData = [...this.dataSource]
            const target = newData.filter((item) => id === item.id)[0]
            this.editingKey = ''
            if (target) {
                Object.assign(target, this.cacheData.filter((item) => id === item.id)[0])
                delete target.editable
                this.dataSource = newData
            }
        },

        /*************table2*************/
        handleChange2(value, id, column) {
            const newData = [...this.dataSource2]
            const target = newData.filter((item) => id === item.id)[0]
            if (target) {
                target[column] = value
                this.dataSource2 = newData
            }
        },
        edit2() {
            const newData = [...this.dataSource2]
            const target = newData.map((item) => {
                item.editable = true
                return item
            })
            this.editingKey2 = true
            if (target) {
                this.dataSource2 = target
            }
        },
        save2() {
            const newData = [...this.dataSource2]
            const newCacheData = [...this.cacheData2]
            const target = newData.map((item) => {
                item.editable = false
                return item
            })
            const targetCache = newCacheData
            if (target && targetCache) {
                this.dataSource2 = target
                this.cacheData2 = newCacheData
            }
            this.editingKey2 = ''
        },
        cancel2() {
            const newData = [...this.dataSource2]
            const target = newData.map((item) => {
                item.editable = false
                return item
            })
            this.editingKey2 = ''
            if (target) {
                this.dataSource2 = target
            }
        },
    },
}

function compare(property) {
    return function (a, b) {
        return a[property] - b[property]
    }
}
</script>

<style scoped>
.editable-row-operations a {
    margin-right: 8px;
}

.marR10 {
    margin-right: 10px;
}
</style>
